<template>
  <div class="widget_settings_pro">
    <ele-form-section
        v-model="formData"
        :request-fn="handleSubmit"
        :sections="sections"
        @request-success="handleSuccess"
    >

      <template v-slot:inventory="{ desc, data, field, formData }">
        <div class="editForm">
          <div class="form-item inline" style="width:100%;display: flex;align-items: center;justify-content: space-between">
            <label class="el-form-item__label" style="padding: 0">显示剩余库存</label>
            <el-switch
                v-model="formData.inventory"
                active-color="#1e90ff">
            </el-switch>
          </div>

          <div style="display: flex;justify-content: space-between;align-items: center" v-if="formData.inventory">
            <label class="el-form-item__label" style="padding: 0">库存数量范围</label>
            <span>
              <el-input v-model="formData.inventory_min" style="width: 70px;margin: 0" size="mini"></el-input>
              ~
               <el-input v-model="formData.inventory_max" style="width: 70px;margin: 0" size="mini"></el-input>
            </span>
          </div>
        </div>
      </template>

      <template v-slot:live_view="{ desc, data, field, formData }">
        <div class="editForm">
          <div class="form-item inline" style="width:100%;display: flex;align-items: center;justify-content: space-between">
            <label class="el-form-item__label" style="padding: 0">显示当前预览</label>
            <el-switch
                v-model="formData.live_view"
                active-color="#1e90ff">
            </el-switch>
          </div>

          <div style="display: flex;justify-content: space-between;align-items: center" v-if="formData.live_view">
            <label class="el-form-item__label" style="padding: 0">浏览人数范围</label>
            <span>
              <el-input v-model="formData.live_view_min" style="width: 70px;margin: 0" size="mini"></el-input>
              ~
              <el-input v-model="formData.live_view_max" style="width: 70px;margin: 0" size="mini"></el-input>
            </span>
          </div>
        </div>
      </template>

      <template v-slot:delivery_time="{ desc, data, field, formData }">
        <div class="editForm">
          <div class="form-item inline" style="width:100%;display: flex;align-items: center;justify-content: space-between">
            <label class="el-form-item__label" style="padding: 0">显示运达时间</label>
            <el-switch
                v-model="formData.delivery_time"
                active-color="#1e90ff">
            </el-switch>
          </div>

          <div style="display: flex;justify-content: space-between;align-items: center" v-if="formData.delivery_time">
            <label class="el-form-item__label" style="padding: 0">运达时间范围</label>
            <span>
              <el-input v-model="formData.delivery_time_min" style="width: 70px;margin: 0" size="mini"></el-input>
              ~
              <el-input v-model="formData.delivery_time_max" style="width: 70px;margin: 0" size="mini"></el-input>
            </span>
          </div>
        </div>
      </template>

      <template v-slot:purchase_record="{ desc, data, field, formData }">
        <div class="editForm">
          <div class="form-item inline" style="width:100%;display: flex;align-items: center;justify-content: space-between">
            <label class="el-form-item__label" style="padding: 0">显示浮窗通知</label>
            <el-switch
                v-model="formData.purchase_record"
                active-color="#1e90ff">
            </el-switch>
          </div>
        </div>
      </template>
      <template v-slot:blocks="{ desc, data, field, formData }">
        <el-collapse v-model="activeNames">
        <el-collapse-item title="内容1" name="1" class="game-select editForm" :key="1" v-if="formData.page1">
            <div class="editForm">
              <div class="form-item inline">
                <label>内容</label>
                <div class="selected" v-if="formData.page1 && formData.page1.id">
                  <span class="value">{{ formData.page1.title }}</span>
                  <div class="icon">
                    <i class="el-icon-sort" @click="handleTableList(1)"></i>
                    <i class="icon_custom el-icon-delete" @click="formData.page1.id = null"></i>
                  </div>
                </div>
                <el-button v-else type="primary" icon="el-icon-edit" size="small" @click="handleAddPage(1)"
                           style="width: 242px;display: block;">添加自定义页
                </el-button>
              </div>
            </div>
          <div class="form-item forbid">
            <label>副标题</label>
            <ele-form-quill-edit v-model="formData.page1.desc"
                                 ref="myQuillEditor"
            ></ele-form-quill-edit>
          </div>
          <div class="form-item forbid">
            <label>图标</label>
            <ele-form-upload-plus-file v-model="formData.page1.icon_src" title="图标"/>
          </div>
        </el-collapse-item>

        <el-collapse-item title="内容2" name="2" class="game-select editForm" :key="2" v-if="formData.page2">
            <div class="editForm">
              <div class="form-item inline">
                <label>内容</label>
                <div class="selected" v-if="formData.page2 && formData.page2.id">
                  <span class="value">{{ formData.page2.title }}</span>
                  <div class="icon">
                    <i class="el-icon-sort" @click="handleTableList(2)"></i>
                    <i class="icon_custom el-icon-delete" @click="formData.page2.id = null"></i>
                  </div>
                </div>
                <el-button v-else type="primary" icon="el-icon-edit" size="small" @click="handleAddPage(2)"
                           style="width: 242px;display: block;">添加自定义页
                </el-button>
              </div>
            </div>
          <div class="form-item forbid">
            <label>副标题</label>
            <ele-form-quill-edit v-model="formData.page2.desc"
                                 ref="myQuillEditor"
            ></ele-form-quill-edit>
          </div>
          <div class="form-item forbid">
            <label>图标</label>
            <ele-form-upload-plus-file v-model="formData.page2.icon_src" title="图标"/>
          </div>
        </el-collapse-item>

        <el-collapse-item title="内容3" name="3" class="game-select editForm" :key="3" v-if="formData.page3">
            <div class="editForm">
              <div class="form-item inline">
                <label>内容</label>
                <div class="selected" v-if="formData.page3 && formData.page3.id">
                  <span class="value">{{ formData.page3.title }}</span>
                  <div class="icon">
                    <i class="el-icon-sort" @click="handleTableList(3)"></i>
                    <i class="icon_custom el-icon-delete" @click="formData.page3.id = null"></i>
                  </div>
                </div>
                <el-button v-else type="primary" icon="el-icon-edit" size="small" @click="handleAddPage(3)"
                           style="width: 242px;display: block;">添加自定义页
                </el-button>
              </div>
            </div>
          <div class="form-item forbid">
            <label>副标题</label>
            <ele-form-quill-edit v-model="formData.page3.desc"
                                 ref="myQuillEditor"
            ></ele-form-quill-edit>
          </div>
          <div class="form-item forbid">
            <label>图标</label>
            <ele-form-upload-plus-file v-model="formData.page3.icon_src" title="图标"/>
          </div>
        </el-collapse-item>
      </el-collapse>
      </template>

      <template v-slot:form-btn="{ btns }">
        <div class="rest-btn" @click="reset">
          <svg-icon icon-class="reset-settings"></svg-icon>
          重置配置
        </div>
      </template>
    </ele-form-section>

    <el-dialog title="系统自定义选择" :visible.sync="productDialogVisible" :append-to-body="true">
<!--      <div class="search-list">-->
<!--        <el-form ref="form" class="search-table-form" :model="formParams" label-width="90px" size="small"-->
<!--                 style="background: #fff;padding: 10px">-->
<!--          <div style="display: flex;align-items: center">-->
<!--            <el-form-item label="名称：" style="margin-bottom: 0;margin-right: 20px">-->
<!--              <el-input v-model="formParams.seriesName" placeholder="请输入" style="width: 100%"></el-input>-->
<!--            </el-form-item>-->
<!--            <div style="display: flex;align-items: center">-->
<!--              <el-button size="small" type="primary" @click="handleSearch">搜索查询</el-button>-->
<!--              <el-button size="small" type="default" @click="handleRest">重置</el-button>-->
<!--            </div>-->
<!--          </div>-->
<!--        </el-form>-->
<!--      </div>-->
      <el-table :data="tableData" ref="listTable" style="width: 100%" stripe v-loading="loadingTable"
                element-loading-text="加载中"
                highlight-current-row @row-click="handleCurrentRow">
        <el-table-column label="选择" width="50px">
          <template slot-scope="scope">
            <el-radio class="no-label" v-model="indexRow" :label="scope.row.id" :key="'radio' + scope.$index"
                      @change="currentRow(scope.$index, scope.row)"></el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="名称"/>
        <el-table-column prop="content" label="内容" :show-overflow-tooltip="true">
          <template slot-scope="{row}">
            <div style="height: 60px" v-html="row.content"></div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          class="pagination"
          background
          @current-change="handleCurrentChange"
          :current-page="formParams.page"
          layout="total, prev, pager, next, jumper"
          :page-size="formParams.pageSize"
          :total="total">
      </el-pagination>
      <span slot="footer" class="dialog-footer">
<!--    <el-button @click="productDialogVisible = false">取 消</el-button>-->
    <el-button type="primary" @click="saveProductList">新增</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import {deepClone} from '@/utils/utils';
import {getCusPage} from '@/api/custom';
import {mapGetters} from 'vuex';

export default {
    name: 'seriesDetailForm',
    props: {
        value: {
            type: Object,
            default: () => ({})
        }
    },
    watch: {
        value: {
            handler (newVal, oldVal) {
                this.formData = JSON.parse(newVal.styleJson);
            },
            immediate: false,
            deep: true
        },
        formData: {
            handler (newVal, oldVal) {
                this.pageCount++;
                if (this.pageCount !== 1) {
                    this.setData();
                }
            },
            immediate: false,
            deep: true
        }
    },
    data () {
        return {
            productDialogVisible: false,
            pageIndex: 0,
            pageCount: 1,
            formData: this.value ? JSON.parse(this.value.styleJson) : {},
            activeNames: [],
            formParams: {
                page: 1,
                pageSize: 20
            },
            total: 0,
            loadingTable: false,
            indexRow: null,
            tableData: [],
            uploadPath: process.env.VUE_APP_BASE_API + '/upload-file',
            sections: [
                {
                    title: '元素展示',
                    isShowLabel: true,
                    formDesc: {
                        'description_position': {
                            type: 'select',
                            label: '商品描述展示方式',
                            options: [
                                {text: '图片下方', value: 'bottom'},
                                {text: '图片右方且默认展开', value: 'side'},
                                {text: '图片右方且默认收起', value: 'side_close'},
                                {text: '图片右方默认只展开描述', value: 'side_open_one'}
                            ]
                        },
                        'reviews_position': {
                            type: 'select',
                            label: '商品评论展示位置',
                            options: [
                                {text: '置顶', value: 'top'},
                                {text: '中间', value: 'center'},
                                {text: '末尾', value: 'bottom'}
                            ]
                        },
                        'inventory': {
                        },
                        'live_view': {
                        },
                        'delivery_time': {
                        },
                        'purchase_record': {

                        }
                    }
                },
                {
                    title: '高级设置',
                    isShowLabel: true,
                    formDesc: {
                        'share_facebook': {
                            type: 'switch',
                            break: true,
                            label: '可分享到Facebook'
                        },
                        'share_twitter': {
                            type: 'switch',
                            break: true,
                            label: '可分享到Twitter'
                        },
                        'share_pinterest': {
                            type: 'switch',
                            break: true,
                            label: '可分享到Pinterest'
                        },
                        'is_relative_product_show': {
                            type: 'switch',
                            break: true,
                            label: '显示相关推荐'
                        },
                        'relative_title': {
                            type: 'input',
                            label: '推荐商品标题',
                            default: 'You May Also Like'
                        },
                        'product_number': {
                            type: 'slider',
                            label: () => {
                                return `推荐产品数  ${this.formData.product_number}`;
                            },
                            attrs: {
                                min: 2,
                                max: 20,
                                step: 2
                            }
                        }
                        /* 'recommended_products_position': {
                type: 'select',
                label: '推荐商品位置',
                options: [
                    {text: '商品详情并行', value: 'line'},
                    {text: '商品详情底部', value: '1'}
                ]
            } */
                    }
                },
                {
                    title: '附加内容设置',
                    isShowLabel: true,
                    formDesc: {
                        'display_logistics': {
                            type: 'switch',
                            break: true,
                            label: '显示物流信息'
                        },
                        blocks: {},
                        blocks1: {},
                        blocks2: {},
                        blocks3: {}
                    }
                }
            ],
            predefineColors: [
                '#ff4500',
                '#ff8c00',
                '#ffd700',
                '#90ee90',
                '#00ced1',
                '#1e90ff',
                '#c71585',
                'rgba(255, 69, 0, 0.68)',
                'rgb(255, 120, 0)',
                'hsv(51, 100, 98)',
                'hsva(120, 40, 94, 0.5)',
                'hsl(181, 100%, 37%)',
                'hsla(209, 100%, 56%, 0.73)'
            ]
        };
    },
    created () {
    },
    computed: {
        siteId () {
            return this.$store.state.user.siteId;
        },
        ...mapGetters(['timeZone'])
    },
    mounted () {
        if (this.formData.display_logistics === undefined) {
            this.formData.display_logistics = true;
        }
        if (!('reviews_position' in this.formData)) {
            this.$set(this.formData, 'reviews_position', 'center');
        }
        if (!this.formData.page1) {
            this.$set(this.formData, 'page1', {
                desc: '',
                icon_src: ''
            });
        }
        if (!this.formData.page2) {
            this.$set(this.formData, 'page2', {
                desc: '',
                icon_src: ''
            });
        }
        if (!this.formData.page3) {
            this.$set(this.formData, 'page3', {
                desc: '',
                icon_src: ''
            });
        }

        console.log(this.formData);
    },
    methods: {
        initData () {
            let parameters = {
                siteId: this.siteId
            };
            this.loadingTable = true;
            getCusPage({...parameters, ...this.formParams}).then((res) => {
                this.tableData = res.records;
                this.total = res.totalElements;
                this.loadingTable = false;
            }).catch(() => {
                this.loadingTable = false;
            });
        },
        handleAddPage (index) {
            this.indexRow = null;
            this.pageIndex = index;
            this.initData();
            this.productDialogVisible = true;
        },
        addPic () {
            this.formData.blocks.push({
                button_link: '',
                alignment: 'top',
                button_bg_color: '#FFFFFF',
                button_label: 'Learn More11',
                button_text_color: '#000000',
                mobile_src: '',
                opacity: 25,
                src: '',
                sub_title: 'Tell your brand\'s story through  images',
                text_color: '#FFFFFF',
                text_position: 'center_left',
                title: 'Image Slide',
                url: ''
            });
        },
        handleTableList (index) {
            this.pageIndex = index;
            this.productDialogVisible = true;
            let row = this.tableData.find(res => res.id === this.formData[`page${index}`].id);
            this.$nextTick(() => {
                this.$refs.listTable.setCurrentRow(row);
                this.indexRow = row.id;
            });
        },
        handleResponse (response, file, fileList) {
            return response;
        },
        handleSubmit (data) {
            return Promise.resolve();
        },
        handleSuccess () {
            this.$message.success('创建成功');
        },
        reset () {
            this.pageCount = 0;
            this.$emit('resetData', this.value);
        },
        setData () {
            let data = deepClone(this.value);
            data.styleJson = JSON.stringify(this.formData);
            this.$store.commit('SET_PROJECT_DATA', data);
        },
        handleCurrentRow (row, column, event) {
            this.indexRow = row.id;
        },
        saveProductList () {
            if (this.pageIndex === 1) {
                this.formData.page1 = this.getParams(this.indexRow) || {};
            } else if (this.pageIndex === 2) {
                this.formData.page2 = this.getParams(this.indexRow) || {};
            } else {
                this.formData.page3 = this.getParams(this.indexRow) || {};
            }
            this.productDialogVisible = false;
        },
        getParams (id) {
            return this.tableData.find(res => res.id === id);
        },
        handleRest () {
            this.formParams = {
                name: '',
                page: 1,
                pageSize: 20,
                status: 'unfinished'
            };
            this.initData();
        },
        handleCurrentChange (val) {
            this.formParams.page = val;
            this.initData();
        },
        handleSearch () {
            this.initData();
        }
    }
};
</script>

<style scoped lang="scss">
.form-item-inline {
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 10px;
  color: #606266;
  height: 32px;
  margin-bottom: 10px;
}

.editForm {
  margin-bottom: 10px;

  .form-item {
    margin-top: 10px;

    label {
      display: block;
      height: 32px;
      line-height: 32px;
    }

    &.inline {
      width: 242px;

      .selected {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #eef0f2;
        padding: 0 10px;

        .icon {
          i:first-child {
            margin-right: 10px;
          }
        }
      }
    }
  }

  ::v-deep .el-collapse-item__content {
    border: 1px solid #d8deec;
    border-top: 0;
    padding-left: 10px;
  }
}

.addBtn {
  width: 100%;
}
</style>
